<template>
  <div class="xtable2-panel-modal">
    <je-table
      ref="treePanel"
      :stripe="false"
      auto-resize
      sync-resize
      show-overflow
      keep-source
      show-header-overflow
      resizable
      :height="tableHeight"
      header-align="center"
      border
      draggable
      :store="gridStore"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showUpdateStatus: true,
      }"
      size="mini"
    >
      <je-table-column width="40">
        <template #header>
          <i
            style="font-size: 16px; cursor: pointer; text-align: center"
            class="fal fa-plus"
            @click="addColumnTable2"
          ></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer; text-align: center; margin-left: 5px"
            class="fal fa-times"
            @click="deleteColumnTable2(row)"
          ></i>
        </template>
      </je-table-column>
      <je-table-column title="表编码" :edit-render="{}" width="220" field="tableCode">
        <template #edit="{ row }">
          <je-grid-select
            v-model:value="row.tableCode"
            name="tableCode"
            config-info="JE_CORE_RESOURCETABLE,tableCode~tableName~pkCode~viewFieldCode,RESOURCETABLE_TABLECODE~RESOURCETABLE_TABLENAME~RESOURCETABLE_PKCODE~RESOURCETABLE_PKCODE,S"
            :querys="[
              {
                code: 'RESOURCETABLE_ISCREATE',
                type: '=',
                value: '1',
                cn: 'and',
              },
              // {
              //   code: 'JE_CORE_RESOURCETABLE_ID',
              //   type: 'in',
              //   value: viewIds ? viewIds.split(',') : [],
              //   cn: 'and',
              // },
              {
                code: 'SY_PRODUCT_ID',
                type: '=',
                value: productId,
                cn: 'and',
              },
              {
                type: 'in',
                cn: 'and',
                code: 'RESOURCETABLE_TYPE',
                value: ['PT', 'TREE'],
              },
            ]"
            :order="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
          />
        </template>
      </je-table-column>
      <je-table-column title="表名称" :edit-render="{}" field="tableName" min-width="220">
        <template #edit="{ row }">
          <je-input v-model:value="row.tableName" name="tableName" type="text" />
        </template>
      </je-table-column>
      <je-table-column title="主键字段名" :edit-render="{}" field="pkCode" min-width="220">
        <template #edit="{ row }">
          <je-input v-model:value="row.pkCode" name="pkCode" type="text" />
        </template>
      </je-table-column>
      <je-table-column title="主键对应视图字段" :edit-render="{}" width="160" field="viewFieldCode">
        <template #edit="{ row }">
          <je-input v-model:value="row.viewFieldCode" name="viewFieldCode" type="text" />
        </template>
      </je-table-column>
      <je-table-column title="包含字段" :edit-render="{}" width="160" field="fieldCodes">
        <template #edit="{ row }">
          <je-grid-select
            v-model:value="row.fieldCodes"
            name="fieldCodes"
            config-info="JE_CORE_TABLECOLUMN,fieldCodes,TABLECOLUMN_CODE,M"
            :querys="querysFieldCodes(row)"
            :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
            :select-options="{
              idProperty: 'TABLECOLUMN_CODE',
              value: row.fieldCodes,
              addQuerys: [
                {
                  code: 'TABLECOLUMN_TABLECODE',
                  value: row.tableCode,
                  type: '=',
                  cn: 'and',
                },
              ],
            }"
          />
        </template>
      </je-table-column>
      <je-table-column title="特殊字段带值配置" :edit-render="{}" width="160" field="dofieldCodes">
        <template #edit="{ row }">
          <je-input v-model:value="row.dofieldCodes" type="text"></je-input>
        </template>
      </je-table-column>
      <je-table-column title="需更新" width="80" align="center" field="updateData" type="switch" />
      <je-table-column title="需添加" width="80" align="center" field="insertData" type="switch" />
      <je-table-column title="需删除" width="80" align="center" field="deleteData" type="switch" />
    </je-table>
  </div>
</template>

<script>
  import { ref, defineComponent, onMounted } from 'vue';
  import { Grid, InputSelect, Input, Data } from '@jecloud/ui';
  import { useFuncStore } from '@/store/func-store';
  export default defineComponent({
    name: 'Xtable2',
    components: {
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      JeInput: Input,
      JeGridSelect: InputSelect.Grid,
    },
    props: {
      data: {
        type: Array,
        required: true,
      },
      dataId: {
        type: String,
      },
    },
    emits: ['getTableRef'],
    setup(props, { emit }) {
      const treePanel = ref(null);
      const gridStore = Data.Store.useGridStore({
        data: [],
      });
      const funcStore = useFuncStore();
      const productId = ref(funcStore.product.id);
      const operateData = ref([]);
      const tableHeight = ref();
      const viewIds = ref(props.dataId);
      const addColumnTable2 = async () => {
        const record = {
          pkCode: '', // 主键字段名
          tableCode: '', // 表编码
          tableName: '', // 表名称
          viewFieldCode: '', // 主键对应本视图字段
          fieldCodes: '', //包含字段
          dofieldCodes: '', //特殊字段带值配置
          updateData: '1',
          insertData: '1',
          deleteData: '1',
        };
        gridStore.insert(record, -1);
        methods.changeHeight();
      };
      const methods = {
        changeHeight() {
          const arr = gridStore.data;
          let length = arr.length > 10 ? 10 : arr.length;
          const height = length ? 32 * (length + 1) : 200;
          tableHeight.value = height <= 200 ? 200 : height;
        },
        // 删除按钮
        deleteColumnTable2(record) {
          gridStore.remove(record);
          methods.changeHeight();
        },
        // 包含字段
        querysFieldCodes(row) {
          return [{ code: 'TABLECOLUMN_TABLECODE', type: '=', value: row.tableCode }];
        },
      };
      onMounted(() => {
        gridStore.loadData(props.data);
        methods.changeHeight();
        emit('getTableRef', treePanel.value);
      });
      return {
        ...methods,
        treePanel,
        gridStore,
        addColumnTable2,
        productId,
        tableHeight,
        operateData,
        viewIds,
      };
    },
  });
</script>
